<template>
  <el-row class="login-container">
    <el-col :span="18" class="form-container">
      <el-form ref="loginForm" label-position="left" label-width="80px" :model="formData" :rules="rules">
        <el-form-item prop="nickname" label="头像">
          <el-upload
            class="avatar-uploader"
            action="http://47.99.116.48:8889/imgUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="formData.imageUrl" :src="formData.imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item prop="nickname" label="名称">
          <el-input v-model="formData.nickname" placeholder="请输入您的昵称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="enterGame">进入游戏</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

</template>

<script>
import { MessageBox } from 'element-ui'
export default {
  data() {
    return {
      // 表单信息
      formData: {
        nickname: '',
        imageUrl: ''
      },

      // 校验规则
      rules: {
        nickname: [{ required: true, message: '请输入您的昵称' }],
        imageUrl: [{ required: true, message: '请选择头像' }]
      }
    }
  },

  methods: {
    // 登录
    enterGame() {
      this.$refs.loginForm.validate(async flag => {
        // 名称为空
        if (!flag) return
        // 名称不为空，通过socket向服务端通信校验
        const nicknameIsExist = await this.$store.dispatch('checkUserExist', this.formData.nickname)
        if (nicknameIsExist) {
          MessageBox.alert('该昵称已存在，请重新输入!')
          return
        }
        localStorage.setItem('nickname', this.formData.nickname)
        localStorage.setItem('profile', this.formData.imageUrl)
        this.$router.push('/home')
        this.$store.commit('updateNickname', this.formData.nickname)
      })
    },
    handleAvatarSuccess(res, file) {
      // 将获取到的文件转为base64
      const reader = new FileReader()
      reader.readAsDataURL(file.raw)
      reader.onload = e => {
        this.formData.imageUrl = e.target.result
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = ['image/jpeg', 'image/png'].includes(file.type)
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style scoped>
.login-container{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;

}
.form-container{
  height: 330px;
}
.avatar-uploader ::v-deep  .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-form{
  padding: 2vh 4vw 1vh 2vw;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  box-sizing: border-box;
}

@media screen and (min-width: 769px) and (max-width: 992px) {
  .el-form {
    margin: auto;
    width: 48%;
  }
}
@media screen and (min-width: 993px){
  .el-form {
    margin: auto;
    width: 38%;
  }
}
</style>
